<template>
  <div class="_wz_vehicleBinding">
    <Card dis-hover :bordered="true" style="margin:0 0 10px;" id="_wz_top_search_vehicleBinding">
      <p slot="title">车辆绑定</p>
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="120" :rules="ruleValidate">
        <FormItem label="选择车辆" prop="vehicleUuid">
          <i-select v-model="formData.vehicleUuid" filterable placeholder="请选择选择车辆" clearable>
            <Option v-for="item in trailerList" :value="item.uuid" :key="item.uuid">{{ item.carPlateNo }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="addSubmit('formAdd')">绑定</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="margin:0 0 10px;">
      <p slot="title">运输车辆关联列表</p>
      <div>
        <Table stripe highlight-row ref="table" :loading="loading" border :columns="columns" :data="data" :height="tableHeight"></Table>
      </div>
    </Card>
    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
export default {
  //modify 修改 add 新增
  // 需要修改的数据  表单类型  打开方式
  props: ["selectData"],//接收来自父组件的数据
  data() {
    return {
      spinShow:false,//本页加载
      formData: {},
      ruleValidate: {
        vehicleUuid: [
          {required: true, message: '请选择选择车辆', trigger: 'blur'}
        ],
      },
      loading: true,
      columns: [
        {type: 'index', width: 70, align: 'center', title: '序号'},
        {title: '车牌号', key: 'carPlateNo', minWidth:120},
        {title: '车架号',minWidth: 190, key: 'vehicleFrameNo'},
        {
          title: '操作',fixed: 'right',width:100, render: (h, params) => {
          return h('Button', {
            props: {type: 'info',size: "small"},
            style: {"margin": "0px 5px 0 0"},
            on: {
              click: () => {
                this.unbundle(params.row)
              }
            }
          }, "解绑");
        }
        },
      ],
      data: [],
      tableHeight: 450,

      trailerList: [],

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态
  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    //车辆数据
    that.axios.post(that.apiUrl.webApi + "/core/vehicle/coreVehicleList",{}).then(res => {
        if (!!res) {
          that.trailerList = res.data.data;
        }
      }).catch(err => {
      console.log("失败", err)
    })
    that.tableLoadData();

    that.$nextTick(function () {
      that.tableHeight = (window.innerHeight - document.getElementById("_wz_top_search_vehicleBinding").offsetHeight - 51 - 32 - 20 - 12 - 51) + "px";
      window.onresize = ()=> {
        that.tableHeight = (window.innerHeight - document.getElementById("_wz_top_search_vehicleBinding").offsetHeight - 51 - 32 - 20 - 12 - 51) + "px";
      };
    })

  },
  methods: {//执行的方法
    //加载表格数据
    tableLoadData() {
      let that = this;
      that.loading = true;//加载
      that.axios.post(that.apiUrl.webApi + "/management/vehicle/binding/trailerVehicle/list",  {trailerUuid: that.selectData.uuid}).then(res => {
          that.loading = false;
          if (!!res) {
            that.data = res.data.data;
          }
        }).catch(err => {
        console.log('失败', err);
      })
    },
    addSubmit(data) {
      let that = this;
      that.$refs[data].validate((valid) => {
        that.formData.trailerUuid = that.selectData.uuid;
        if (valid) {//正则判断使用
          that.spinShow = true;
          that.axios.post(that.apiUrl.webApi + "/management/vehicle/binding/trailerVehicle", that.formData).then(res => {
              that.spinShow = false;
              if (!!res) {
                that.$Message.success("绑定成功");
                that.tableLoadData()
              }
            }).catch(err => {
            console.log('失败', err);
          })
        } else {
          this.$Message.error('请正确填写表单');
        }
      })
    },
    unbundle(data) {
      let that = this;
      that.$Modal.confirm({
        title: '解绑提醒',
        content: '确定要解绑选中的记录？',
        onOk: () => {
          that.spinShow = true;
          that.axios.post(that.apiUrl.webApi + "/management/vehicle/binding/unbind/trailerVehicle", {uuid: data.uuid}).then(res => {
            that.spinShow = false;
            if (!!res) {
              that.$Message.success("解绑成功");
              that.tableLoadData()
            }
          }).catch(err => {
            console.log('失败', err);
          })
        },
        onCancel: () => {
          //点击取消
        }
      });
    }

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;
  }
}
</script>
<style lang="less">
  ._wz_vehicleBinding {

  }
</style>
